<template>
  <div class="main">
    <div class="item">
      <div class="first">
        <span class="name">{{vdata.sendname}}</span>
        <span class="type" v-if="vdata.label">{{vdata.label}}</span>
        <span class="tele">{{vdata.sendphone}}</span>
      </div>
      <div class="second">
        <span class="addre">{{vdata.address}}</span>
      </div>
      <div class="third">
        <span class="moren" v-if="hidden">默认</span>
        <a href="#" @click="dele"><i class="icon iconfont icon-remove-1-copy"></i></a>
        <router-link :to="{path:'/change?id='+vdata.id}"><a href="#"><i class="icon iconfont icon-edit_icon"></i></a></router-link>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      props:["vdata"],
      name: "",
      data:function(){
        return {
          id:""
        }
      },
      methods:{
        back(){
          this.$router.go(-1);
        },
        dele(){
          var params = new URLSearchParams();
          params.append('id',this.vdata.id);
          this.$http.post('/api/putian/personmess/dropaddress.php',params).then(res=>{
            console.log(res);
            if(res.data=="success"){
              this.$router.replace({ path: '/address'})
              this.$router.go(0);
              // this.$emit("deleid",this.vdata.id);
            }
          }).catch(err=>{
            console.log(err);
          })
        }
      },
      computed:{
        hidden(){
          return Number(this.vdata.default)
        }
      }
    }
</script>

<style scoped>
  .main{
    width: 100%;
  }
  .item{
    font-size: 14px;
    position: relative;
    margin: 0 auto;
    padding: 16px 40px;
    border-top: 2px solid #f0f0f0;
    border-bottom: 16px solid #f0f0f0;
  }
  .first,.second,.third{
    width: 100%;
    overflow: hidden;
  }
  .name{
    font-size: 28px;
    line-height: 1.4;
    color: #333;
    float: left;
    margin-right: 8px;
  }
  .type{
    line-height: 1.4;
    float: left;
    padding: 2px 16px 0 16px;
    color: #009c4c;
    border: 2px solid #009c4c;
    border-radius: 18px;
  }
  .tele{
    float: right;
    font-size: 28px;
    line-height: 1.4;
    color: #333;
  }
  .second{
    display: inline-block;
    padding: 20px 0;
    color: #333;
    border-bottom: 2px solid #f0f0f0;
  }
  .third{
    line-height: 40px;
    width: 100%;
    padding: 10px 0 10px 0;
  }
  .moren{
    color: red;
  }
  .third>a{
    float: right;
    margin-left: 30px;
    font-size: 30px;
    color: #a4a4a4;
  }
  i{
    font-size: 34px;
  }
</style>
